<template>
<div>
  <!-- 用户已登陆 -->
  <div class="ok" v-if='isShow'>
    <!-- 用户头像与名称 -->
    <div class="user">
        <image class="img" :src="userInfo.avatarUrl"/>
        <div class="name">
          你好
          <div style="color:gray">{{userInfo.nickName}}</div>
        </div>
     </div>
     <!-- 功能条 -->
     <!-- 如果为管理员 -->
     <div v-if='admin'>
      <div class="list">
         <div class="title" @tap="toMerchGoods()">
          商品管理
         </div>
         <div class="icon"></div>
      </div>
      <div class="list-t">
        <div class="title">
          活动管理
        </div>
        <div class="icon"></div>
      </div>
       <div class="list-t">
        <div class="title">
          订单管理
        </div>
        <div class="icon"></div>
       </div>
     </div>
     <!-- 如果不是管理员 -->
     <div v-else>
       <div class="list">
         <div class="title">
          用户资料
         </div>
         <div class="icon"></div>
      </div>
      <div class="list-t">
         <div class="title" @tap="toYuxuan()">
          预选列表
         </div>
         <div class="icon"></div>
      </div>
      <div class="list-t">
        <div class="title">
          订单中心
        </div>
        <div class="icon"></div>
      </div>
     </div>
   </div>
   <!-- 用户未登陆 -->
   <div class="nook" v-else>
     <div class="user">
        <image class="img" src="cloud://text-17tek.7465-text-17tek-1301448855/2.jpg" />
        <button class="login" open-type="getUserInfo" @getuserinfo="getUserInfo" style="background-color: transparent;border:none;" >
          请点我进行登陆
        </button>
     </div>
   </div>
 </div>
</template>

<script>
import card from '@/components/card'

export default {
  data () {
    return {
      isShow: false,
      userInfo: {},
      openid: '',
      my: ['oRuhd5XmPINZWeDeEocNMZGJFXJI', 'oRuhd5VXrRGjoOFmFmYP_XGapPEU'],
      admin: false

    }
  },
  beforeMount () {
    // 触发授权
    this.handleGetUserInfo()
    var that = this
    // 云函数调用getpoenid获取openid
    wx.cloud.callFunction({
      name: 'getopenid',
      data: {
        name: ''
      },
      success (res) {
        var id = []
        console.log(res)
        id = that.my
        that.openid = res.result.openid
        console.log(that.openid)
        for (var i = 0; i < id.length; i++) {
          if (that.openid === id[i]) {
            that.admin = true
          }
        }
      },
      fail (res) {
        console.log(res)
      }
    })
  },

  components: {
    card
  },

  methods: {
    // 获取用户信息
    handleGetUserInfo () {
      wx.getUserInfo({
        success: (data) => {
          console.log(data)
          this.userInfo = data.userInfo
          this.isShow = true
        },
        fail: () => {
          console.log('获取失败')
        }
      })
    },
    getUserInfo (data) {
      // 判断用户是否授权
      console.log(data)
      if (data.mp.detail.rawData) {
      // 用户授权
        this.handleGetUserInfo()
      }
    },
    // 跳转商品管理
    toMerchGoods () {
      wx.navigateTo({
        url: '../../pages/merchgoods/main'
      })
    },
    toYuxuan () {
      wx.navigateTo({
        url: '../../pages/yugou/main'
      })
    }
  },

  created () {
    // let app = getApp()
  }
}
</script>

<style scoped>
/* 用户样式 */
.user{
  flex: 1;
  display: flex;
  position: relative;
  height: 250rpx;
  border-top: 2px solid gray;
  border-bottom: 2px solid gray;
}

.img{
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
  margin-left: 50rpx;
  margin-top: 25rpx;
}
.name{
  margin-left: 30rpx;
  margin-top:30rpx;
}
/* 功能条样式 */
.list{
  margin-top: 40rpx;
  border: 2px solid gray;
  height: 80rpx;
}
.list-t{
  margin-top: 4rpx;
  border: 2px solid gray;
  height: 80rpx;
}
.title{
  margin-top: 15rpx;
  margin-left: 40rpx;
}
.icon{
  margin-left: 680rpx;
  margin-top: -30rpx;
   width:10px;  
  height:10px; 
  background-color:#fff;  
  border-top: 2px #000 solid;
  border-right: 2px #000 solid;
  transform:rotate(45deg);
}
/* 未登录样式 */
.login{
  height: 100rpx;
  margin: auto auto;
  background-color: transparent;   /*按钮透明*/  
	border:none;
}
</style>
